<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<th:block th:insert="common/fragment :: icon"></th:block>
	<title>博客管理</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
	<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>

<body>
	<!-- 导航栏部分 -->
	<nav th:replace="common/admin-frag :: firstmenu(1)"></nav>
	<!-- 二级导航 -->
	<div th:replace="common/admin-frag :: secondmenu(2,~{::#a1},~{::#a2})">
		<a id="a1" href="#" th:href="@{/admin/blogs/input}" class="item" th:classappend="${n==1} ? 'teal active'">发布</a>
		<a id="a2" href="#" th:href="@{/admin/blogs}" class="item" th:classappend="${n==2} ? 'teal active'">列表</a>
	</div>

	<!-- 中间部分 -->
	<div class="m-container-small m-padded-tb-big">
		<div class="ui container">
			<!--操作是否成功的信息提示-->
			<div class="ui success message" th:unless="${#strings.isEmpty(message)}">
				<i class="close icon"></i>
				<div class="header">提示：</div>
				<p th:text="${message}">恭喜，操作成功!</p>
			</div>
			<!-- 搜索栏 -->
			<div class="ui segment form">
				<input type="hidden" name="page">
				<div class="inline fields">
					<div class="field">
						<input type="text" name="title" placeholder="标题">
					</div>
					<div class="field">
						<div class="ui labeled action input">
							<div class="ui type selection dropdown">
								<input type="hidden" name="typeId">
								<i class="dropdown icon"></i>
								<div class="default text">分类</div>
								<div class="menu">
									<div th:each="type : ${types}" th:text="${type.name}" class="item" data-value="1" th:data-value="${type.id}">1</div>
								</div>
							</div>
							<button id="clear-btn" class="ui compact button">clear</button>
						</div>
					</div>
					<div class="field">
						<div class="ui checkbox">
							<input type="checkbox" id="recommend" name="recommend">
							<label for="recommend">推荐</label>
						</div>
					</div>
					<div class="field">
						<button type="button" id="search-btn" class="ui teal button"><i class="search icon"></i>搜索</button>
					</div>
				</div>
			</div>
			<!-- 表格展示 -->
			<div id="table-container">
				<table th:fragment="blogList" class="ui teal center aligned celled table">
					<thead>
					<tr>
						<th></th>
						<th>标题</th>
						<th>类型</th>
						<th>推荐</th>
						<th>状态</th>
						<th>更新时间</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="blog,iterStat : ${page.content}">
						<td th:text="${iterStat.count}">1</td>
						<td th:text="${blog.title}">
							<a href="#" th:href="@{/blog/{id}(id=${blog.id})}">刻意练习清单</a>
						</td>
						<td th:text="${blog.type.name}">认知升级</td>
						<td th:text="${blog.recommend} ? '是':'否'">是</td>
						<td th:text="${blog.published} ? '发布':'草稿'"></td>
						<td th:text="${blog.updateTime}">2020-10-16 16:30</td>
						<td>
							<a href="#" th:href="@{/admin/blogs/{id}/input(id = ${blog.id})}" class="ui mini teal basic button">编辑</a>
							<a href="#" th:href="@{/admin/blogs/{id}/delete(id = ${blog.id})}" class="ui mini orange basic button">删除</a>
						</td>
					</tr>
					</tbody>
					<tfoot>
					<tr>
						<th colspan="7">
							<div class="ui mini left floated pagination menu" th:if="${page.totalPages}>1">
								<a onclick="page(this)" th:attr="data-page=${page.number}-1" th:unless="${page.first}" class="icon item"><!--上一页-->
									<i class="left chevron icon"></i>
								</a>
								<a onclick="page(this)" th:attr="data-page=${page.number}+1" th:unless="${page.last}" class="icon item"><!--下一页-->
									<i class="right chevron icon"></i>
								</a>
							</div>
							<a href="#" th:href="@{/admin/blogs/input}" class="ui mini right floated teal basic button m-margin-tb-tiny">新增</a>
						</th>
					</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>

	<!-- 底部部分 -->
	<footer th:replace="common/fragment :: footer"></footer>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
	<script src="../../static/js/me.js" th:src="@{/js/me.js}"></script>

	<script>
		$('.menu.toggle').click(function () {
			$('.m-item').toggleClass('m-mobile-hide'); /* 记住不用加点 */
		});
		// 账号下拉列表
		$('.ui.dropdown').dropdown();
		//关闭操作提示的初始化
		$('.message .close').on('click', function () {
			$(this).closest('.message').transition('fade');/*fade:褪色，会慢慢的关闭*/
		});
		//将上一页下一页的值传给表单隐藏域，使上一页与下一页的效果能已post请求发过去
		function page(obj) {
			$("[name='page']").val($(obj).data("page"));
			loadData();
		}
		//局部刷新数据(表格中的)
		function loadData() {
			$("#table-container").load("/admin/blogs/search", {
				title: $("[name='title']").val(),
				typeId: $("[name='typeId']").val(),
				recommend: $("[name='recommend']").prop('checked'),
				page: $("[name='page']").val()
			});
		}
		//通过点击搜索查询数据
		$("#search-btn").click(function () {
			loadData();
		});
		//清楚分类的选项
		$('#clear-btn').on('click', function() {
			$('.ui.type.dropdown').dropdown('clear');
		});
	</script>
</body>

</html>